<template>
  <div>
    <div class="reg-bg">
      <img src="../assets/loginBg.jpg" />
    </div>
    <el-card class="reg-card">
      <el-form
        :model="registerForm"
        status-icon
        :rules="rules"
        ref="registerForm"
        label-position="right"
      >
        <span class="title">注册</span>
        <el-form-item label="昵称">
          <el-input v-model="registerForm.name" placeholder="输入昵称(选填)"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="registerForm.email" placeholder="输入邮箱"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="code">
          <br />
          <el-col :span="14">
            <el-input
              style="margin-top:0px"
              v-model="registerForm.code"
              placeholder="若收不到验证码 请查看邮件垃圾箱"
            ></el-input>
          </el-col>
          <el-col :span="2" :offset="3">
            <v-btn v-if="!isDisabled" color="#409EFF" dark :loading="loading" @click="getCode">点击获取</v-btn>
            <v-btn v-else disabled>{{ btnText }}</v-btn>
          </el-col>
        </el-form-item>
        <el-form-item label="密码" prop="pass">
          <el-input type="password" v-model="registerForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input type="password" v-model="registerForm.checkPass" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <v-btn class="reg-btn" color="#409EFF" dark @click="register('registerForm')">注册</v-btn>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { register, sendCode } from "@/api/userSerivce";
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.registerForm.checkPass !== "") {
          this.$refs.registerForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.registerForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      registerForm: {
        name: "",
        email: "",
        password: "",
        checkPass: "",
        code: "",
      },
      btnText: "",
      isDisabled: false,
      loading: false,
      rules: {
        email: [
          { required: true, message: "请输入邮箱", trigger: "blur" },
          { type: "email", message: "请输入正确的邮箱地址", trigger: "blur" },
        ],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }],
      },
    };
  },
  methods: {
    register(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          register(this.registerForm)
            .then((res) => {
              if (res.data.code === 200) {
                //后期添加成功提示，提示完过几秒跳转
                this.$router.push({ name: "login" });
              }
            })
            .catch((err) => {
              this.$message.error(err.response.data.msg);
            });
        } else {
          this.$message.error("请检查输入的数据");
        }
      });
    },
    getCode() {
      if (this.registerForm.email == "") {
        this.$message.error("邮箱不存在");
        return;
      }
      this.loading = true;
      sendCode(this.registerForm.email)
        .then((res) => {
          this.loading = false;
          if (res.data.code === 200) {
            this.$message.success("发送成功");
            let count = 0;
            this.isDisabled = true;
            let tag = setInterval(() => {
              if (++count >= 60) {
                clearInterval(tag);
                this.isDisabled = false;
              }
              this.btnText = `${60 - count}秒后获取`;
            }, 1000);
          }
        })
        .catch((err) => {
          this.$message.error(err.response.data.msg);
          this.loading = false;
          this.isDisabled = false;
          this.btnText = "点击获取";
        });
    },
  },
};
</script>

<style>
.reg-bg {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: -1;
}

.reg-bg > img {
  width: 100%;
  height: 100%;
  border: 0px;
}

.reg-card {
  width: 40%;
  margin: auto;
  margin-top: 80px;
}

.title {
  margin-top: 20px;
  margin-bottom: 30px;
  font-size: 26px;
}

.reg-btn {
  width: 30%;
  margin-left: 35%;
}
</style>